:root {
    /* Tier 1 variables */
    // colors
    --color-neutral-25: #fcfcfd;
    --color-neutral-50: #f9fafb;
    --color-neutral-100: #f2f4f7;
    --color-neutral-200: #e4e7ec;
    --color-neutral-300: #d0d5dd;
    --color-neutral-400: #98a2b3;
    --color-neutral-500: #667085;
    --color-neutral-600: #475467;
    --color-neutral-700: #344054;
    --color-neutral-800: #1d2939;
    --color-neutral-900: #101828;

    --color-primary-25: #fbfbff;
    --color-primary-50: #f6f6fe;
    --color-primary-100: #ececfd;
    --color-primary-200: #dedeff;
    --color-primary-300: #ccccfa;
    --color-primary-400: #b7b7ff;
    --color-primary-500: #a0a0f5;
    --color-primary-600: #8080f2;
    --color-primary-700: #6358d4;
    --color-primary-800: #4b32c3;
    --color-primary-900: #341bab;

    --color-warning-25: #fffcf5;
    --color-warning-50: #fffaeb;
    --color-warning-100: #fef0c7;
    --color-warning-200: #fedf89;
    --color-warning-300: #fec84b;
    --color-warning-400: #fdb022;
    --color-warning-500: #f79009;
    --color-warning-600: #dc6803;
    --color-warning-700: #b54708;
    --color-warning-800: #93370d;
    --color-warning-900: #7a2e0e;

    --color-success-25: #f6fef9;
    --color-success-50: #ecfdf3;
    --color-success-100: #d1fadf;
    --color-success-200: #a6f4c5;
    --color-success-300: #6ce9a6;
    --color-success-400: #32d583;
    --color-success-500: #12b76a;
    --color-success-600: #039855;
    --color-success-700: #027a48;
    --color-success-800: #05603a;
    --color-success-900: #054f31;

    --color-rose-25: #fff5f6;
    --color-rose-50: #fff1f3;
    --color-rose-100: #ffe4e8;
    --color-rose-200: #fecdd6;
    --color-rose-300: #fea3b4;
    --color-rose-400: #fd6f8e;
    --color-rose-500: #f63d68;
    --color-rose-600: #e31b54;
    --color-rose-700: #c01048;
    --color-rose-800: #a11043;
    --color-rose-900: #89123e;

    /* Tier 2 variables */
    --primary-button-background-color: var(--color-primary-800);
    --primary-button-hover-color: var(--color-primary-900);
    --primary-button-text-color: #fff;
    --secondary-button-background-color: var(--color-primary-50);
    --secondary-button-hover-color: var(--color-primary-100);
    --secondary-button-text-color: var(--color-brand);
    --ghost-button-background-color: var(--color-primary-50);
    --ghost-button-text-color: var(--color-brand);

    --color-brand: var(--color-primary-800);
    --body-background-color: #fff;
    --body-text-color: var(--color-neutral-500);
    --headings-color: var(--color-neutral-900);

    --border-color: var(--color-neutral-300);
    --divider-color: var(--color-neutral-200);

    --icon-color: var(--color-neutral-400);
    --dark-icon-color: var(--color-neutral-500);
    --link-color: var(--color-primary-800);

    --lighter-background-color: var(--color-neutral-100);
    --lightest-background-color: var(--color-neutral-50);
    --docs-lightest-background-color: var(--color-primary-50);
    --hero-background-color: var(--color-neutral-25);
    --footer-background-color: var(--color-neutral-25);
    --outline-color: var(--color-brand);
}

@media (prefers-color-scheme: dark) {
    :root {
        --body-background-color: var(--color-neutral-900);
        --body-text-color: var(--color-neutral-300);
        --headings-color: #fff;

        --divider-color: var(--color-neutral-600);
        --border-color: var(--color-neutral-500);

        --icon-color: var(--body-text-color);
        --dark-icon-color: #fff;
        --link-color: var(--color-primary-400);

        --lighter-background-color: var(--color-neutral-800);
        --lightest-background-color: var(--color-neutral-800);
        --docs-lightest-background-color: var(--color-neutral-800);
        --hero-background-color: var(--color-neutral-800);
        --footer-background-color: var(--color-neutral-800);
        --outline-color: #fff;
    }
}

html[data-theme="light"] {
    --body-background-color: #fff;
    --body-text-color: var(--color-neutral-500);
    --headings-color: var(--color-neutral-900);

    --border-color: var(--color-neutral-300);
    --divider-color: var(--color-neutral-200);

    --icon-color: var(--color-neutral-400);
    --dark-icon-color: var(--color-neutral-500);
    --link-color: var(--color-primary-800);

    --lighter-background-color: var(--color-neutral-100);
    --lightest-background-color: var(--color-neutral-50);
    --docs-lightest-background-color: var(--color-primary-50);
    --hero-background-color: var(--color-neutral-25);
    --footer-background-color: var(--color-neutral-25);
    --outline-color: var(--color-brand);
    --img-background-color: #fff;
}

html[data-theme="dark"] {
    --body-background-color: var(--color-neutral-900);
    --body-text-color: var(--color-neutral-300);
    --headings-color: #fff;

    --divider-color: var(--color-neutral-600);
    --border-color: var(--color-neutral-500);

    --icon-color: var(--body-text-color);
    --dark-icon-color: #fff;
    --link-color: var(--color-primary-400);

    --lighter-background-color: var(--color-neutral-800);
    --lightest-background-color: var(--color-neutral-800);
    --docs-lightest-background-color: var(--color-neutral-800);
    --hero-background-color: var(--color-neutral-800);
    --footer-background-color: var(--color-neutral-800);
    --outline-color: #fff;
    --img-background-color: var(--color-neutral-300);
}
